visualHUD.application.setupHudItem = { 
	'general': function(element, dataObject, updateObject){
	
		element.css('display', 'none');
		
		var props = dataObject.properties;
		
		var updateObject = updateObject || {};
		var oldSettings = $.extend({}, props);
		
		$.extend(props, updateObject);
		
		var iconBlock = dataObject.DOM.iconBlock;
		var icon = dataObject.DOM.icon;
		var textBlock = dataObject.DOM.textBlock;
		var counter = dataObject.DOM.counter;
		
		var isPowerup = props.name == 'powerupIndicator';
		var isTimer = props.name == 'timer';
		var isAmmo = props.name == 'ammoIndicator';
		var isArmor = props.name == 'armorIndicator';
		var isHealth = props.name == 'healthIndicator';
		var isAccuracy = props.name == 'accuracyIndicator';
		
		var iconMargins = {
			'left': 'Right',
			'top': 'Bottom',
			'right': 'Left',
			'bottom': 'Top'
		};
		
		var iconPositionFn = props.iconPosition == 'left' || props.iconPosition == 'right' ? 'removeClass' : 'addClass';
		if(!isPowerup) {
			element[iconPositionFn]('icon-top');
		};
		
		var imargin = 'margin' + iconMargins[props.iconPosition];			
		var textbox = visualHUD.fontToBoxSize(props.textSize/100);

		if(isAccuracy){
			textbox[0] = Math.round(128 * props.textSize / 100);
		};
		
		if(isPowerup || isTimer){
			textbox[0] = '';
		};

		textBlock.width(textbox[0]).height(textbox[1]);
		
		if(updateObject.textSize != oldSettings.textSize) {
			counter.css({
				'line-height': textbox[1] + 'px',
				'font-size': (props.textSize * visualHUD.scaleFactor) + '%'
			});
		};

		if(updateObject.iconSize != oldSettings.iconSize) {
			iconBlock.css({
				'width': (props.iconSize * visualHUD.scaleFactor) + 'px',
				'height': (props.iconSize * visualHUD.scaleFactor) + 'px'
			}).css({
				'display': props.iconSize * 1 == 0 ? 'none' : ''
			})
			
		};

		if(updateObject.textOpacity != oldSettings.textOpacity || updateObject.iconOpacity != oldSettings.iconOpacity){
			var iconOpacity = isPowerup ? 1 :  props.iconOpacity / 100;
			textBlock.css('opacity', props.textOpacity / 100);
			iconBlock.css('opacity', iconOpacity);
		};
		   
		var iconData = visualHUD.constructor.icons[props.name];

		if(updateObject.iconStyle != oldSettings.iconStyle){
			if(isPowerup){
				icon.each(function(i){
					this.src = iconData[i].url
				});
			} else {
				icon.attr('src', iconData[props.iconStyle].url);
			};
		};
		
		if(isPowerup){
			var lastChild = element.find('div.powerup-item:last').eq(0)
			lastChild.css('margin', 'auto');
			if(!props.singlePowerup){
				lastChild.css('margin-' + props.iconPosition, (props.iconSpacing * visualHUD.scaleFactor) + 'px');
			}
			var miltiItemsCSS = props.singlePowerup ? 'addClass' : 'removeClass';
			element[miltiItemsCSS]('single-powerup');
		} else {
			iconBlock.css('margin', 'auto').css(imargin, (props.iconSpacing * visualHUD.scaleFactor) + 'px');
		};

		
		if(updateObject.text != oldSettings.text){
			counter.text(props.text + (isAccuracy ? '%' : ''));
		};

		if(updateObject.textStyle != oldSettings.textStyle && !isPowerup){
			counter.removeClass('textstyle-' + oldSettings.textStyle).addClass('textstyle-' + props.textStyle);
		};
		
		var ranges = visualHUD.constructor.colorRangeValues;
		var textValue = new Number(props.text);
		var color = props.textColor || '#FFFFFF';
		props.textColor = color.replace('#','');
		
		var range = 'high';
		var colorRangeObject = props.colorRanges;
		
		if(colorRangeObject){
			for(var a =0, b = colorRangeObject.length; a < b; a++){
				var range = colorRangeObject[a].range;
				
				if(textValue >= range[0] && textValue <= range[1]){
					props.textColor = colorRangeObject[a].color;
					break;
				}
			};
		};
			
		counter.css({
			'color': '#' + props.textColor
		});

		
		
		if(updateObject.iconPosition != oldSettings.iconPosition){
			if(isPowerup) {
				element.removeClass('stack-' + oldSettings.iconPosition).addClass('stack-' + props.iconPosition);
				var verticalLayout =  props.iconPosition.match(/top|bottom/gi);
				if(verticalLayout){
					element.width(textbox[0] + (props.iconsSize * visualHUD.scaleFactor) + (props.iconSpacing * visualHUD.scaleFactor)); //element.children().eq(0).width()
				} else {
					element.width('auto');
				};
			} else {
				if(props.iconPosition == 'left' || props.iconPosition == 'top'){
					var blocks = [iconBlock, textBlock];
				}else {
					var blocks = [textBlock, iconBlock];
				};
				
				for(var a = 0, b = blocks.length; a < b; a++){
					blocks[a].appendTo(element);
				};
			};
		};


		if(!dataObject.form){
			var elementAttributes = {
				isPowerup: isPowerup,
				isTimer: isTimer,
				isAmmo: isAmmo,
				isArmor:isArmor,
				isHealth: isHealth,	
				isColorRangeObject: colorRangeObject,
				isAccuracy: isAccuracy
			};
			
			dataObject.form = visualHUD.application.buildControls.general(element, elementAttributes, dataObject);
		};
		
		element.data('HUDItem', dataObject).css('display', '');

	},
	'obits': function(element, dataObject, updateObject){
		var props = dataObject.properties;
		
		var updateObject = updateObject || {};
		var oldSettings = $.extend({}, props);
		
		$.extend(props, updateObject);

		var iconData = visualHUD.constructor.icons[props.name];
		var icon = dataObject.DOM.icon;
		if(updateObject.iconStyle != oldSettings.iconStyle){
			icon.attr('src', iconData[props.iconStyle].url);
		};
		
		if(!dataObject.form){
			var elementAttributes = {};
			
			dataObject.form = visualHUD.application.buildControls.obits(element, elementAttributes, dataObject);
		};
		
		element.data('HUDItem', dataObject);
		
	},
	'iconItem': function(element, dataObject, updateObject){

		
		var props = dataObject.properties;
		
		var updateObject = updateObject || {};
		var oldSettings = $.extend({}, props);
		
		$.extend(props, updateObject);
		
		var iconBlock = dataObject.DOM.iconBlock;
		var icon = dataObject.DOM.icon;	
		
		if(updateObject.iconSize != oldSettings.iconSize || updateObject.iconOpacity != oldSettings.iconOpacity) {
			iconBlock.css({
				'width': (props.iconSize * visualHUD.scaleFactor) + 'px',
				'height': (props.iconSize * visualHUD.scaleFactor) + 'px',
				'opacity': props.iconOpacity / 100
			}).css({
				'display': props.iconSize * 1 == 0 ? 'none' : ''
			})
			
		};

		var iconData = visualHUD.constructor.icons[props.name];

		if(updateObject.iconStyle != oldSettings.iconStyle){
			icon.attr('src', iconData[props.iconStyle].url);
		};
		
		if(!dataObject.form){
			var elementAttributes = {};
			
			dataObject.form = visualHUD.application.buildControls.iconItem(element, elementAttributes, dataObject);
		};
		
		element.data('HUDItem', dataObject);


	},
	'scoreBox': function(element, dataObject, updateObject){

		
		var props = dataObject.properties;
		
		var updateObject = updateObject || {};
		var oldSettings = $.extend({}, props);
		
		$.extend(props, updateObject);
		
		var layout = props.layout;
		if(updateObject.layout != oldSettings.layout) {
			var layoutMap = {
				'vertical': 'scorebox-vertical',
				'horizontal': 'scorebox-horizontal'
			};
		
			for(var x in layoutMap){
				var fn = x == layout ? 'addClass' : 'removeClass';
				element[fn](layoutMap[x]);
			};
		};

		if(updateObject.spacing != oldSettings.spacing || updateObject.layout != oldSettings.layout) {
			var marginMap = {
				'vertical': 'Bottom',
				'horizontal': 'Right'
			};
			var boxElement = element.find('.item-icon').eq(0);
			boxElement.css('margin', 0).css('margin' + marginMap[props.layout], (props.spacing * visualHUD.scaleFactor) + 'px');
		};
		
		if(updateObject.mode != oldSettings.mode) {
			var modeMap = {
				'ffa': 'ffa-score',
				'tdm': 'team-score'
			};
		
			for(var m in modeMap){
				var fn = m == props.mode ? 'addClass' : 'removeClass';
				element[fn](modeMap[m]);
			};
		};

		if(updateObject.scoreboxStyle != oldSettings.scoreboxStyle) {
			element.removeClass('style-' + oldSettings.scoreboxStyle).addClass('style-' + props.scoreboxStyle);
		};
		
		
		if(!dataObject.form){
			var elementAttributes = {};
			
			dataObject.form = visualHUD.application.buildControls.scoreBox(element, elementAttributes, dataObject);
		}
		
		var form = dataObject.form.get(0);
		form.layout.disabled = props.scoreboxStyle != '2';

		
		element.data('HUDItem', dataObject);
	},
	'rect': function(element, dataObject, updateObject){

		var props = dataObject.properties;
		
		var blueTeamColor = '0019ff';
		var redTeamColor = 'FF0000';		
		
		var updateObject = updateObject || {};
		var oldSettings = $.extend({}, props);
		
		$.extend(props, updateObject);
		
		var $box = dataObject.DOM.box;
		var box = $box[0];
		
		var isRect = props.itemType == 'rect';
		var isBar = props.itemType == 'bar';
		var isChat = props.itemType == 'chatArea';
		
		if(updateObject.color != oldSettings.color || updateObject.opacity != oldSettings.opacity || updateObject.boxStyle != oldSettings.boxStyle || updateObject.borderRadius != oldSettings.borderRadius) {
			var color = $.color('#' + props.color);
			var rgba = 'rgba({0},{1})';
			if($.browser.msie){
				box.style.filter = visualHUD.getBoxGradient(props.boxStyle || 0, color, props.opacity/100);
			} else {
				var renderGradiend = !props.boxStyle || props.boxStyle == '0' || isBar || parseInt(props.borderRadius) > 0;
				$box.removeClass('rbox-' + oldSettings.borderRadius).addClass('rbox-' + props.borderRadius);
				
				box.style.backgroundColor = renderGradiend ? rgba.format(color.rgb.join(','), props.opacity/100) : 'transparent';
				box.style.backgroundImage = renderGradiend ? 'none' : visualHUD.getBoxGradient(props.boxStyle, color, props.opacity/100);
			};
		};
		
		if(updateObject.borderRadius != oldSettings.borderRadius && parseInt(props.borderRadius) > 0){
			visualHUD.application.hints.performanceImpact('rounded corners', 'rbox');
		};
		
		var padding = props.padding * visualHUD.scaleFactor || 0;
		var minSize = 2 * padding + visualHUD.scaleFactor;
		
		var size = {
			width: parseInt(props.width) * visualHUD.scaleFactor,
			height: parseInt(props.height) * visualHUD.scaleFactor
		};
		
		var w = Math.max(minSize, size.width);
		var h = Math.max(minSize, size.height);
		
		if(updateObject.width != oldSettings.width) {
			w = props.maxWidth ? Math.min(props.maxWidth * visualHUD.scaleFactor, w) : w;
			element.width(w);
		};
		
		if(updateObject.height != oldSettings.height) {
			h = props.maxHeight ? Math.min(props.maxHeight * visualHUD.scaleFactor, h) : h;
			element.height(h);
		};

		if(isChat){
			padding = 0;
		}
		$box.css({
			width: (w - padding*2) + 'px',
			height: (h - padding*2) + 'px',
			padding: (padding) + 'px'
		});
		
		if(!dataObject.form){
			var elementAttributes = {};
			dataObject.form = visualHUD.application.buildControls.rect(element, elementAttributes, dataObject);
		} 
		
		var form = dataObject.form.get(0);
		
		if(!isBar) {
			form.boxStyle.disabled = parseInt(props.borderRadius) > 0;
			if(!isChat){
				form.hairLine.disabled = w > visualHUD.scaleFactor && h > visualHUD.scaleFactor;
			};
		};

/*		$.extend(props, {
			width: parseInt(form.width),
			height: parseInt(form.height)
		});*/
		
		return element.data('HUDItem', dataObject);
	},
	'bar': function(element, dataObject, updateObject){

		var element = this.rect(element, dataObject, updateObject);
		
		var props = dataObject.properties;
		
		var updateObject = updateObject || {};
		var oldSettings = $.extend({}, props);
		$.extend(props, updateObject);
		
		
		var form = dataObject.form;

		var $box = dataObject.DOM.box;
		
		var h100 = dataObject.DOM.h100;
		var h200 = dataObject.DOM.h200;
		var barValue = parseInt(props.barValue);
		
		var barsSize = {
			h100: barValue > 100 ? 100 : barValue,
			h200: barValue > 100 ? barValue - 100 : 0
		};
		
		for(var k in barsSize){
			dataObject.DOM[k].css('width', barsSize[k] + '%');
/*			var color = $.color('#' + props[k+'Color']);
			var opacity = props[k+'Opacity'] / 100;
			var rgba = 'rgba({0},{1})';
*/
		};

		var paintBar = function(_bar, _color, _opacity){
			var rgba = 'rgba({0},{1})';
			if($.browser.msie){
				_bar.css('filter', visualHUD.getBoxGradient('0', _color, _opacity));
			} else {			
				_bar.css('background', rgba.format(_color.rgb.join(','), _opacity));
			};
		};
		
		var colorRangeObject = props.colorRanges;
		
		var opacity = props.barsOpacity / 100;
		var color;
		var bar = h100;
		

		
		if(colorRangeObject){
			if(barValue <= 100){

				for(var a = 0, b = colorRangeObject.length - 1; a < b; a++){
					var range = colorRangeObject[a].range;
					
					if(barValue >= range[0] && barValue <= range[1]){
						color = $.color('#' + colorRangeObject[a].color);
						break;
					}
				};
				paintBar(h100, color, opacity);
							
			} else if(barValue > 100){
				color = $.color('#' + colorRangeObject[1].color);
				paintBar(h100, color, opacity);
				
								
				color = $.color('#' + colorRangeObject[2].color);
				paintBar(h200, color, opacity);
				
			};


		};
				
		var directionMap = {
			'0': 'ltr-bar',
			'1': 'rtl-bar'
		};
	
		for(var m in directionMap){
			var fn = m == props.barDirection ? 'addClass' : 'removeClass';
			element[fn](directionMap[m]);
		};
		
		return element.data('HUDItem', dataObject);
	},

	'chatArea': function(element, dataObject, updateObject){

		var props = dataObject.properties;
		
		var updateObject = updateObject || {};
		var oldSettings = $.extend({}, props);
		
		var element = this.rect(element, dataObject, updateObject);	
		

		$.extend(props, updateObject);
		
		
		var form = dataObject.form;

		var $box = dataObject.DOM.box;
		var $list = dataObject.DOM.chatList;
		
		if(updateObject.padding != oldSettings.padding && $list) {
			$list.css({padding: props.padding * visualHUD.scaleFactor});
		};		
		
		props.toggleChat = typeof props.toggleChat == 'undefined' ? true : props.toggleChat;
		
		if(updateObject.toggleChat != oldSettings.toggleChat) {
			var toggleClass = (props.toggleChat ? 'add' : 'remove') + 'Class';
			element[toggleClass]('chat-visible');
			toggleClass = (props.toggleChat ? 'remove' : 'add') + 'Class';
			element[toggleClass]('chat-invisible');			
		};
		dataObject.form.find('input[name=toggleChat]').attr('checked', props.toggleChat);
		
		return element.data('HUDItem', dataObject);
	},
		
	'textItem': function(element, dataObject, updateObject){

		var props = dataObject.properties;
		
		var blueTeamColor = '0019ff';
		var redTeamColor = 'FF0000';		
		
		var updateObject = updateObject || {};
		var oldSettings = $.extend({}, props);
		
		$.extend(props, updateObject);
		
		var counter = dataObject.DOM.counter;
		var text = dataObject.DOM.text;
		var textBlock = dataObject.DOM.textBlock;
		
		

//--------
		var textbox = visualHUD.fontToBoxSize(props.textSize/100);
		textBlock.height(textbox[1]);
		
		if(updateObject.textSize != oldSettings.textSize) {
			var textCss = {
				'line-height': textbox[1] + 'px',
				'font-size': (props.textSize * visualHUD.scaleFactor) + '%'
			};
			counter.css(textCss);
			text.css(textCss);
		};

		if(updateObject.textColor != oldSettings.textColor) {
			text.css({
				'color': '#' + props.textColor
			});
		};
		
		if(updateObject.opacity != oldSettings.opacity){
			textBlock.css('opacity', props.opacity / 100);
		};

		if(updateObject.textStyle != oldSettings.textStyle){
			counter.removeClass('textstyle-' + oldSettings.textStyle).addClass('textstyle-' + props.textStyle);
			text.removeClass('textstyle-' + oldSettings.textStyle).addClass('textstyle-' + props.textStyle);
		};

		if(updateObject.template != oldSettings.template){
			text.html(props.template + (props.template.length ? ':&nbsp;' : ''));
		};
				
		var colorRangeObject = props.colorRanges;
		
		if(colorRangeObject){
			var skillRatio = parseInt(props.text);
			for(var a =0, b = colorRangeObject.length; a < b; a++){
				var range = colorRangeObject[a].range;
				
				if(skillRatio >= range[0] && skillRatio <= range[1]){
//					var template = '<span style="color:#{0}">{1}</span>';
					var color = visualHUD.constructor.colorPresets[parseInt(colorRangeObject[a].color)];
					counter.css({color: '#' + colorRangeObject[a].color}).html(props.text)

//					template = template.format(color, props.text);
//					var text = props.template.format(template);
//					counter.html(text);
					break;
				}
			};
		};
		
//--------		
		if(!dataObject.form){
			var elementAttributes = {};
			dataObject.form = visualHUD.application.buildControls.textItem(element, elementAttributes, dataObject);
		} 
		
		return element.data('HUDItem', dataObject);
	}
};